<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>订单详情</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
</head>
<body>
<div class="layui-container">
    <h1 class="layui-header">订单详情</h1>
    <table class="layui-table">
        <colgroup>
            <col width="150">
            <col width="100">
            <col width="150">
            <col width="100">
            <col width="100">
            <col width="150">
            <col width="100">
            <col width="150">
            <col width="100">
            <col width="100">
            <col width="150">
            <col width="150">
        </colgroup>
        <thead>
        <tr class="layui-bg-cyan">
            <th>订单号</th>
            <th>订单状态</th>
            <th>商品名称</th>
            <th>商品价格</th>
            <th>商品数量</th>
            <th>订单总金额</th>
            <th>支付方式</th>
            <th>订单备注</th>
            <th>姓名</th>
            <th>电话</th>
            <th>创建时间</th>
            <th>成交时间</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <!-- 使用 Thymeleaf 遍历订单列表 -->
        <tr th:each="orderDetails : ${orders}" class="layui-table-hover">
            <td th:text="${orderDetails.orderId}"></td>
            <!--            <td th:text="${orderDetails.orderStatus}"></td>-->
            <!--            <td th:text="${orderDetails.orderStatus == 0 ? '待发' : '已发'}"></td>-->
            <td th:text="${orderDetails.orderStatus == 0 ? '待发货' : (orderDetails.orderStatus == 1 ? '待收货' : (orderDetails.orderStatus == 2 ? '成功' : (orderDetails.orderStatus == 3 ? '待付款' : '已取消'))) }"></td>
            <td th:text="${orderDetails.productName}"></td>
            <td th:text="${orderDetails.productPrice}"></td>
            <td th:text="${orderDetails.productQuantity}"></td>
            <td th:text="${orderDetails.orderTotal}"></td>
<!--            <td th:text="${orderDetails.paymentMethod}"></td>-->
            <td th:text="${orderDetails.paymentMethod == 1 ? '支付宝' : '微信'}"></td>
            <td th:text="${orderDetails.shippingAddress}"></td>
            <td th:text="${orderDetails.contactName}"></td>
            <td th:text="${orderDetails.contactPhone}"></td>
            <td th:text="${orderDetails.createdTime}"></td>
            <td th:text="${orderDetails.updatedTime}"></td>
            <td>
                <!--仅在需要付款的订单后面显示付款按钮-->
                <button class="layui-btn layui-btn-normal layui-btn-sm"
                        th:data-order-id="${orderDetails.orderId}" onclick="payOrder(this)"
                        th:if="${orderDetails.orderStatus == 3}">付款
                </button>
                <!-- 仅在发货请求时显示按钮 -->
                <button th:if="${requestType == 'delivery'}" class="layui-btn layui-btn-normal layui-btn-sm"
                        th:data-order-id="${orderDetails.orderId}" onclick="deliverOrder(this)">发货
                </button>
            </td>
        </tr>
        <!-- 如果商品列表为空，显示提示信息 -->
        <tr th:if="${#lists.isEmpty(orders)}">
            <td colspan="13">暂无符合条件的订单</td>
        </tr>
        </tbody>
    </table>
</div>

<script src="../layui/layui.js"></script>
<script>
    layui.use('table', function () {
        var table = layui.table;
        table.render();
    });

    function deliverOrder(button) {
        var orderId = button.getAttribute("data-order-id");
        var xhr = new XMLHttpRequest();
        xhr.open('PUT', '/kamun/order/orderSend/' + orderId, true);
        xhr.setRequestHeader('Content-Type', 'application/json');
        var data = {
            orderId: orderId
        };
        xhr.onreadystatechange = function () {
            if (xhr.readyState === XMLHttpRequest.DONE) {
                if (xhr.responseURL) {
                    // 发货成功
                    console.log('发货成功');
                    showSuccessMessage();
                } else {
                    // 发货请求失败
                    console.error('发货请求失败');
                    showErrorMessage();
                }
            }
        };
        xhr.send(JSON.stringify(data));
    }

    function showSuccessMessage() {
        // 弹出确认框
        var confirmed = confirm('发货成功！');

        if (confirmed) {
            // 用户点击确认按钮后的操作
            // 例如刷新订单列表或其他操作
            //location.reload(); // 刷新页面示例
            $(".content-container").load("/kamun/order/selectOrderSend");
        }
    }

    function showErrorMessage() {
        // 弹出错误提示框
        alert('发货请求失败！');
    }

    function payOrder(button) {
        var confirmed = confirm('确认付款吗 ?');
        if (!confirmed) {
            return;
        }
        var orderId = button.getAttribute("data-order-id");
        // 发送付款请求
        $.ajax({
            url: '/kamun/order/confirm',
            type: 'POST',
            data: {orderId: orderId},
            success: function (response) {
                // if (response === 'success') {
                    // 付款成功
                    layer.msg('付款成功');
                    // 刷新订单列表或其他操作
                $(".content-container").load("/kamun/order/listBySelf");
                // } else {
                //     // 付款失败
                //     layer.msg('付款失败');
                // }
            },
            error: function () {
                layer.msg('请求失败，请重试');
            }
        });
    }
</script>
</body>
</html>
